<template>
  <el-row :gutter="20">
    <el-form ref="form" :model="form" label-width="80px">
      <el-col :span="12">
        <el-form-item label="选择栏目">
          <el-cascader
            style="width: 100%"
            v-model="form.modelId"
            :options="moduleList"
            :props="optionProps"
            :show-all-levels="false"
          >
          </el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="18" v-show="!outChainFlag">
        <el-form-item label="附件" v-model="form.fileList">
          <el-upload
            :action="uploadApi"
            :data="fileData"
            :headers="headers"
            :file-list="showFileList"
            :on-success="handleUpload"
            :on-remove="handleRemove"
            multiple
          >
            <el-button size="small" type="primary">上传附件</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="轮播新闻">
          <el-switch v-model="form.showLeft" @change="handleCover" />
        </el-form-item>
      </el-col>
      <el-col :span="18" v-show="showCover">
        <el-form-item label="封面" v-model="form.filePicList">
          <el-upload
            :action="uploadApi"
            :data="filePicData"
            :headers="headers"
            accept="image/*"
            :before-upload="beforeAvatarUpload"
            :limit="limit"
            list-type="picture-card"
            :file-list="showFilePicList"
            :on-success="handlePicUpload"
            :on-remove="handlePicRemove"
            multiple
          >
            <i slot="default" class="el-icon-plus"></i>
            <!--            <el-button size="small" type="primary">上传封面</el-button>-->
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="置顶">
          <el-switch v-model="form.topFlag" />
        </el-form-item>
      </el-col>
      <el-col :span="18">
        <el-form-item label="添加时间">
          <el-date-picker
            type="datetime"
            placeholder="选择日期时间"
            v-model="form.createDate"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { uploadAttachmentApi } from "@/api/modules/common.api";
import { delBgImg } from "@/api/modules/article.api";
import day from "dayjs";

export default {
  props: ["moduleList", "outChainFlag", "annexes", "modelIdList", "bizId"],
  data() {
    return {
      limit: 1,
      form: {
        fileList: [],
        filePicList: [],
        optionsList: [],
        modelId: [],
        topFlag: false,
        showLeft: false,
        createDate: "",
        bgImgId: "",
      },
      showCover: false,
      optionProps: {
        value: "moduleId",
        label: "moduleName",
        children: "childList",
      },
      headers: {
        Authorization: `Bearer ${localStorage.getItem("token")}`,
      },
      uploadApi: uploadAttachmentApi,
      fileData: {
        objType: 1,
      },
      filePicData: {
        objType: 0,
      },
      fileList: [],
      filePicList: [],
      showFileList: [],
      showFilePicList: [],
      moduleListArr: [],
      basicFileList: [],
      basicPicFileList: [],
    };
  },
  watch: {
    annexes: {
      handler(value) {
        this.form.outChainFlag = value.outChainFlag;
        this.form.createDate = value.createDate;
        this.form.showLeft = value.showLeft;
        this.form.topFlag = value.topFlag;
        this.showCover = value.showLeft;
        value.attachmentList.forEach((item) => {
          if (item.attrType === 1) {
            this.fileList.push(item.attachmentId);
            this.basicFileList.push(item);
          }
          if (item.attrType === 0) {
            this.filePicList.push(item.attachmentId);
            this.form.bgImgId = item.attachmentId;
            this.basicPicFileList.push(item);
          }
        });
        this.basicFileList.forEach((item) => {
          this.showFileList.push({
            name: item.fileName,
            url: item.filePath,
            id: item.attachmentId,
            attrType: item.attrType,
          });
        });
        this.basicPicFileList.forEach((item) => {
          this.showFilePicList.push({
            name: item.fileName,
            url: item.filePath,
            id: item.attachmentId,
            attrType: item.attrType,
          });
        });
      },
      deep: true,
    },
    moduleList(data) {
      this.moduleListArr = data;
    },
    modelIdList: {
      handler(value) {
        this.form.modelId = value;
      },
      deep: true,
    },

    bizId: {
      handler(newValue) {
        if (newValue) {
          this.filePicData.bizId = newValue;
          this.fileData.bizId = newValue;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getContent() {
      if (this.form.showLeft) {
        if (!this.form.bgImgId) {
          this.$message({
            message: "请上传封面",
            type: "error",
          });
          return;
        }
      }
      return {
        fileList: [...this.fileList, ...this.filePicList],
        topFlag: this.form.topFlag,
        showLeft: this.form.showLeft,
        modelId: this.form.modelId,
        bgImgId: this.form.bgImgId,
        createDate: this.form.createDate
          ? day(this.form.createDate).format("YYYY-MM-DD HH:mm:ss")
          : "",
        // boldFlag: this.form.optionsList?.includes("加粗"), //是否加粗
        // topFlag: this.form.optionsList?.includes("置顶"), //是否置顶
        // pushSchool: this.form.optionsList?.includes("推送学校"), //是否推送学校
      };
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 4;
      if (!isLt2M) {
        this.$message.error("上传失败，图片不能超过4M");
      }
      return isLt2M;
    },
    handleRemove(file, fileList) {
      this.fileList = [];
      fileList.forEach((item) => {
        if (item.response) {
          if (item.response.errno === 0) {
            this.fileList.push(item.response.data.attrId);
          }
        } else {
          this.fileList.push(item.id);
        }
      });
    },
    async handlePicRemove(file, fileList) {
      let data = {};
      if (file.response) {
        data.id = file.response.data.attrId;
      } else {
        data.id = file.id;
      }
      await delBgImg(data);
      if (fileList.length === 0) {
        this.form.bgImgId = "";
      } else {
        this.form.bgImgId = fileList[0].id;
      }
    },
    handleUpload(response, f, fileList) {
      this.fileList = [];
      fileList.forEach((item) => {
        if (item.response) {
          if (item.response.errno === 0) {
            this.fileList.push(item.response.data.attrId);
          }
        } else {
          this.fileList.push(item.id);
        }
      });
    },
    handlePicUpload(response) {
      // console.log("response", response);
      if (response.errno === 0) {
        this.form.bgImgId = response.data.attrId;
      } else {
        this.$message.error("上传失败");
      }
    },
    async handleCover(value) {
      this.showCover = value;
      if (!this.form.showLeft) {
        if (this.form.bgImgId) {
          const data = { id: this.form.bgImgId };
          await delBgImg(data);
          this.form.bgImgId = "";
          this.showFilePicList = [];
        }
      }
    },
  },
};
</script>
